<template>
  <div>
    <button @click="showPre">上一个</button>&nbsp;<button @click="showNext">下一个</button>
    <button @click="addSlideItem">增加一条数据后滚动</button>&nbsp;<button @click="showNext">下一个</button>
    <div class="realalarm">
      <div class="wrap-box">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item,index) in swiperItems" :key="index">
            <div class="realalarmdiv">
              <div class="inner-box">
                当前：{{index}}
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	name: 'swiperDemo',
	data() {
		return {
			swiperOption: {
				slidesPerView: 'auto',
				// loop: true,
				initialSlide: 0, // 初始化时的slide索引
				observer: true,
        // autoplay:true,
        allowTouchMove: false
			},
			swiperItems: [
				{
					body: {
						data: {
							certificate_no: '',
							certificate_type: '',
							city_name: '',
							create_time: '',
							estate_code: '',
							estate_name: '',
							name: '',
							photo: '',
							province_name: '',
							sex: '',
							town_name: ''
						}
					},
					head: { data: '', keywords: '' }
				},
				{
					body: {
						data: {
							certificate_no: '',
							certificate_type: '',
							city_name: '',
							create_time: '1',
							estate_code: '',
							estate_name: '',
							name: '',
							photo: '',
							province_name: '',
							sex: '',
							town_name: ''
						}
					},
					head: { data: '', keywords: '' }
				},
				{
					body: {
						data: {
							certificate_no: '',
							certificate_type: '',
							city_name: '',
							create_time: '',
							estate_code: '',
							estate_name: '',
							name: '',
							photo: '',
							province_name: '',
							sex: '',
							town_name: ''
						}
					},
					head: { data: '', keywords: '' }
				}
			]
		}
  },
  methods: {
    showPre() {
      this.$refs.mySwiper.swiper.slidePrev()
    },
    showNext() {
      this.$refs.mySwiper.swiper.slideNext()
    },
    addSlideItem() {
      // if(this.swiperItems.length>=6) {
      //   this.swiperItems.
      // }
      this.swiperItems.push({ id: Math.random() })
      this.$nextTick(() => {
        this.$refs.mySwiper.swiper.slideNext()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.realalarm {
	top: 240px;
	right: 100px;
	min-width: 180px;
	position: absolute;
	z-index: 10;
	font-size: 12px;
}
.realalarm .wrap-box {
	display: flex;
	width: 564px;
	background: none;
	border-top: 1px solid rgba(2, 144, 216, 0.24);
	box-shadow: 0px 0px 30px 14px rgba(0, 66, 255, 0.32) inset;
	position: relative;
}
.realalarm .wrap-box::before {
	content: '';
	position: absolute;
	left: 32.8%;
	height: 100%;
	border-left: 1px solid rgba(2, 144, 216, 0.24);
}
.realalarm .wrap-box::after {
	content: '';
	position: absolute;
	left: 66%;
	height: 100%;
	border-left: 1px solid rgba(2, 144, 216, 0.24);
}
.realalarm .wrap-box /deep/ .swiper-slide {
	width: 188px;
}
.realalarm .realalarmdiv {
	padding: 15px;
	background: none;
	border-right: 1px solid rgba(2, 144, 216, 0.24);
}
.realalarmdiv:last-child {
	border-right: none;
}
.realalarmdiv:hover .inner-box {
	background: rgb(45, 136, 251);
	color: #fff;
}
.realalarm .inner-box {
	background: rgba(1, 40, 103, 1);
	border: 1px solid rgba(1, 64, 123, 1);
	padding: 10px;
	position: relative;
	line-height: 18px;
	width: 152px;
	height: 224px;
}
.realalarm .sub-tit {
	margin-bottom: 8px;
}
.realalarm .alarm-avatar {
	width: 130px;
	height: 85px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.realalarm .alarm-date {
	white-space: nowrap;
}
.realalarm .alarm-avatar img {
	max-width: 100%;
	max-height: 100%;
}
</style>
